<template>
   <div class="top">
    <van-icon class="ico1" name="arrow-left"  size="25" @click="buyphoneprev" :class="navShow ? 'navOff' : 'navOn'" />
    <div class="top-xiangqing" :class="navShow ? 'navOn' : 'navOff'">
      <van-icon  name="arrow-left"  size="25" @click="buyphoneprev" />
        <ul>
        <li>商品</li>
        <li>评价</li>
        <li>参数</li>
        <li>详情</li>
      </ul>
      <span class="img1"><img src="https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_header_nav.png" alt=""></span>
    </div>
    <van-icon class="ico2" name="more-o"  size="25" :class="navShow ? 'navOff' : 'navOn'" /> 
    
   </div>
</template>

<script>
export default {
    data(){
        return {
            top:"",
            navShow:null
        }
    },
    mounted(){
        window.addEventListener("scroll", ()=> {
            this.top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
        });
    },
    watch :{
        top (newV,oldV){
            if(newV > 42){
                if(newV > 1 ){
                    if(newV > oldV){
                       this.navShow = true;
                    //    console.log("向下");   
                } else{
                    this.navShow = false;
                    // console.log("向上");
                }
                }
            }
        }
    },
   methods:{
    buyphoneprev(){
        this.$router.push('/phone')
    },
   
   }
}
</script>

<style scoped>
  
    
    .navOn{
        position: fixed;
        top: 0;
        transition: all 1s ease-in-out 1s;
        transform: translateZ(0);
        width: 100%;
        height: 2.625rem;
        background-color: #eeeeee;
        display: block;
        /* display: flex; */
    }
    .navOff{
        /* position: fixed;
        top: 0; */
        transition: all 2s ease-in-out 2s;
        transform: translate3d(0,-100%,0);
        /* width: 100%; */
        width: 1.5619rem;
        height:1.5619rem;
        background-color: #fff;
    }
    .ico1{
       z-index: 1;
        margin: .625rem 1.25rem;
        background-color: #fff;
    } 
    .ico2{
       z-index: 1;
        margin: .625rem 20rem  0;
        background-color: #fff;

    } 
    .top{
         width: 23.4375rem;
        height: 2.625rem;
        align-items: center;
        display: flex;
        /* justify-content: space-between; */
    }
    
    
    ul{
        display: flex;
        width: 15.3125rem;
        justify-content: space-between;
       
    }
    .top-xiangqing{
        width: 100%;
      display: flex;
      height: 2.625rem;
      align-items: center;
      background-color: #eeeeee;
      display: none;
      justify-content: space-between;
      flex-direction: row;
    }
    .img1{
        width: 1.875rem;
        height: 1.875rem;
        z-index: 1;
    }
    .img1 img{
        width: 1.875rem;
        height: 1.875rem;
    }
</style>